<template>
  <div class="equipment-bottom-middle">
    <div class="equipment-title">设备异常报告</div>
    <div class="equipment-table-container">
      <Table :columns="columns" :tableData="tableData" :height="350" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
// import { getEquipmentAlarms } from "@/api/large-screen";
import Table from "../table.vue";

const route = useRoute();
const equipmentId = ref(route?.query?.id);

// 报警数据
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
  },
  {
    title: "报警名称",
    dataIndex: "content",
    key: "content",
  },
  {
    title: "时间",
    dataIndex: "createTime",
    key: "createTime",
  },
];
const tableData = ref([]);

const fetchAlarmData = async () => {
  try {
    // const res = await getEquipmentAlarms({ equipmentId: equipmentId.value });
    // tableData.value = res?.records || [];
    tableData.value = new Array(30).fill().map((_, index) => ({
      id: index + 1,
      equipmentNumber: Math.random().toString(36).substring(2),
      equipmentName: `实验间${index + 1}`,
      content: `异常类型${index + 1}`,
      createTime: `2023-01-01 ${index < 9 ? `0${index + 1}` : index + 1}:00:00`,
    }));
  } catch (error) {
    console.error("获取报警数据失败:", error);
  }
};

watch(route, (newVal) => {
  equipmentId.value = newVal?.query?.id;
  fetchAlarmData();
});

onMounted(() => {
  fetchAlarmData();
});
</script>

<style lang="scss" scoped>
$height: 410px;

.equipment-bottom-middle {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .equipment-table-container {
    padding: 0 5px;
  }
}
</style>
